<template>
    <view>
        <nav-bar title="分销订单" bgColor="#f5f5f5"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <!-- 菜单 -->
        <view class="menu_box">
            <view :class="{ active: menuType == 1 }" @click="onSelectMenuType(1)">一级</view>
            <view :class="{ active: menuType == 2 }" v-if="distributionLevel >= 2" @click="onSelectMenuType(2)">二级</view>
            <view :class="{ active: menuType == 3 }" v-if="distributionLevel >= 3" @click="onSelectMenuType(3)">三级</view>
        </view>
        <view class="interval"></view>
        <mescroll-body ref="mescrollRef" height="-98" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
            <view class="order_info" v-for="(item,index) of orderList" :key="index">
                <view class="order_number">
                    <view>订单编号：{{item.orderNo}}</view>
                    <text>{{item.financeStatusStr}}</text>
                </view>
                <view class="user_info">
                    <image :src="item.userHeadImg" mode="aspectFill"></image>
                    <text>{{item.userNickName}}</text>
                    <text>{{item.levelStr}}</text>
                </view>
                <view class="product_price">
                    <text>{{item.orderTypeStr}}</text>
                    <text>{{item.orderStatusStr}}</text>
                </view>
                <view class="product_price">
                    <text>订单金额</text>
                    <text>{{item.payMonerStr}}</text>
                </view>
                <view class="product_price">
                    <text>佣金金额</text>
                    <text>{{item.rateMoneyStr}}</text>
                </view>
                <view class="product_price">
                    <text>订单时间</text>
                    <text>{{item.createTime}}</text>
                </view>
                <view class="product_info">
                    <image :src="item.goodsImg" mode="aspectFill"></image>
                    <view>
                        <text>{{item.goodsName}}</text>
                        <text>{{item.goodsSpecName}}</text>
                        <text>X{{item.goodsNum}}</text>
                    </view>
                </view>
            </view>
        </mescroll-body>
    </view>
</template>

<script>
    import MescrollMixin from "@/components/common/mescroll-uni/mescroll-mixins.js";
    export default {
    	mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
        data() {
            return {
                // 选择菜单
                menuType: 1,
                // 订单列表
                orderList: [],
                downOption: {
                	auto: false //是否在初始化后,自动执行downCallback; 默认true
                },
                distributionLevel: 3
            };
        },
        //第一次加载
        onLoad(e) {
            if(this.$base.module.distributionLevel){
            	this.distributionLevel = this.$base.module.distributionLevel;
            }
        },
        //页面显示
        onShow() {},
        //方法
        methods: {
            // 菜单筛选
            onSelectMenuType(menuType) {
                this.menuType = menuType;
                this.mescroll.triggerDownScroll();
            },
            /*下拉刷新的回调 */
            downCallback() {
            	//联网加载数据
            	this.loadData(1);
            },
            /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
            upCallback(page) {
            	//联网加载数据
            	this.loadData(page.num);
            },
            loadData(pageNo) {
                let httpData = {
                    pageNo: pageNo,
                    pageSize: 15,
                    level: this.menuType
                };
                this.$http
                	.post('api/mime/spread/order/v2/list', httpData,{
                		load:false
                	}).then(res => {
                		uni.stopPullDownRefresh();
                		//方法一(推荐): 后台接口有返回列表的总页数 totalPage
                		this.mescroll.endByPage(res.data.length, res.pages); //必传参数(当前页的数据个数, 总页数)
                		
                		if (pageNo == 1) {
                			this.orderList = res.data;
                		} else {
                			this.orderList = this.orderList.concat(res.data);
                		}
                	}).catch(() => {
                		//联网失败, 结束加载
                		this.mescroll.endErr();
                	});
            },
        },
        //页面隐藏
        onHide() {},
        //页面卸载
        onUnload() {},
        //用户点击分享
        onShareAppMessage(e) {
            return this.wxShare();
        }
    };
</script>
<style lang="scss" scoped>
    @import '@/style/mixin.scss';

    .menu_box {
        padding: 0upx 30upx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f5f5f5;
        position: fixed;
        left: 0;
        width: 100%;
        z-index: 2;
        >view {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            font-size: 28upx;
            color: #333333;
            height: 88upx;
            &::after {
                content: '';
                width: 40upx;
                height: 6upx;
                margin-top: 12upx;
                border-radius: 3upx;
            }

            &.active {
                color: $themeColor;
                &::after {
                    background-color: $themeColor;
                }
            }
        }
    }
    .interval {
        height: 88rpx;
    }
    .order_info {
        margin: 30rpx;
        display: flex;
        flex-direction: column;
        background: #ffffff;
        border-radius: 8rpx;
        overflow: hidden;

        .order_number {
            padding: 20rpx 30rpx;
            background-color: $viceColor;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 24rpx;
            color: $themeColor;
        }

        .user_info {
            background: #ffffff;
            padding: 20rpx 30rpx 20rpx 30rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;

            >image {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
            }

            >text {
                font-size: 24rpx;
                color: #333333;
            }


        }

        .product_price {
            padding: 20rpx 30rpx;
            background: #ffffff;
            font-size: 24rpx;
            color: #333333;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .product_info {
            background: #f7f7f7;
            padding: 20rpx;
            margin: 20rpx;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            >image {
                width: 160rpx;
                height: 160rpx;
            }

            >view {
                flex: 1;
                padding-left: 20rpx;
                display: flex;
                flex-direction: column;

                >text {
                    &:nth-child(1) {
                        font-size: 28rpx;
                        color: #333435;
                    }

                    &:nth-child(2) {
                        font-size: 24rpx;
                        color: #cccccc;
                        padding: 10rpx 0rpx;
                    }

                    &:nth-child(3) {
                        font-size: 24rpx;
                        color: #333333;
                        padding-top: 20rpx;
                    }
                }
            }
        }
    }
</style>
